<template>
  <div>
    <h1>将style属性绑定为数组</h1>
    <div :style="[activeclass, borderclass]"></div>
    <div
      :style="[isactive ? activeclass : '', isborder ? borderclass : '']"
    ></div>
    <div
      :style="[{ backgroundColor: 'red', height: '10px' }, borderclass]"
    ></div>
    <button @click="isactive = !isactive">bg切换</button>
    <button @click="isborder = !isborder">bk切换</button>
  </div>
</template>
<script setup>
import { ref } from "vue";
const activeclass = {
  backgroundColor: "orange",
  height: "20px"
};
const borderclass = {
  border: "2px solid blue"
};
const isactive = ref(true);
const isborder = ref(true);
</script>
<style></style>
